%@page pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="jquery/jquery.min.js"></script>
		<style type="text/css">
/* 			body {color: red;font-size:25px;font-family: cursive;}
			button{margin-right:-15px;height:50px;width:120px;font-size:30px;}
			.search{width:600px;height:38px;border:6px solid #FF6600;font-size:20px;}
			.sousuo{background:#FF6600;height:50px;width:120px;font-size:30px;color:black;font-family:cursive;} */
			.selected{background:#FF6600;color:white;}
			.page{text-align:center;margin-right:-660px;font-size:15px;}
		</style>
	</head>
<center>
	<body>
		<div class="bookType" style="margin-top:30px;margin-bottom:40px">
			选择分类：
			<button class="type" value="哲学">哲学</button>
			<button class="type" value="经济">经济</button>
			<button class="type" value="教育">教育</button>
			<button class="type" value="历史">历史</button>
			<button class="type" value="法律">法律</button>
			<button class="type" value="政治">政治</button>
			<button class="type" value="文学">文学</button>
			<button class="type" value="管理">管理</button>
			<button class="type" value="化学">化学</button>
			<button class="type" value="机械">机械</button>
			<button class="type" value="土建">土建</button>
			<button class="type" value="农业">农业</button>
			<button class="type" value="电信">电信</button>
			<button class="type" value="其他">其他</button>
			<button class="type" value="">全部</button>
		</div>
		<div style="margin-top: 15px">
			模糊查询:
			<input class="search" id="val" />
			<button class="sousuo" onclick="searchButton()">搜索</button>
		</div>
		<div id="table" style="margin-top:30px;">
			<table style='text-align:center' border='3px' bordercolor=green>
				<tr>
					<td>书  本  编  号</td>
					<td>书  本  名  称</td>
					<td>书  本  分  类</td>
					<td>出  版  商  社</td>
					<td>书  本  定  价</td>
					<td>书  本  成  新</td>
					<td>上  架  日  期</td>
					<td>点  击  修  改</td>
				</tr>
				<tr>
					<td><br /></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr>
					<td><br /></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr>
					<td><br /></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr>
					<td><br /></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr>
					<td><br /></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr>
					<td><br /></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr>
					<td><br /></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr>
					<td><br /></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr>
					<td><br /></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr>
					<td><br /></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
			</table>
		</div>
		<table  class="page">
			<tr>
				<td align="center">页码: <input id="page" style="width:20px;height:12px"  />
					<a style="cursor:pointer" onclick="go()">跳转</a>
				</td>
				<td><a style="cursor:pointer" onclick="firstPage()">首页</a></td>
				<td><a style="cursor:pointer" onclick="prePage()">上页</a></td>
				<td><a style="cursor:pointer" onclick="nextPage()">下页</a></td>
			</tr>
		</table>
	</body>
	<script type="text/javascript">
		var bookType = "";
		var val = "";
		var page ="";
		$(function() {
			page = 1;
			search();
		});
		$("#page").blur(function(){
			if(isNaN($("#page").val())){
				alert("请输入数字");
			}else{
				if(parseInt($("#page").val())<=99 &&parseInt($("#page").val())>0){
					page=parseInt($("#page").val());
				}else{
					alert("请输入99以内的数字");
				}
			}
		}) 
   		$(".bookType button").click(function(e){  
      			 $(this).addClass('selected').siblings().removeClass('selected');  
      			 bookType = $(this).val();
   		})  
   		
   		function searchButton() {
			page = 1;
			search();
		}
   		
   		function go(){
   			if($("#page").val()==""){
   				alert("请先输入页码");
   				$("#page").focus();
   			}else{
   				search();
   			}
   		}
   		function firstPage(){
   			if(page==1){
   				alert("已经是首页了");
   			}else{
   				page = 1;
   	   			search();
   			}	
   		}

   		function prePage(){
   			if(page == 1){
   				alert("没有上一页！");
   			}else{
   				page = page -1;
   				search();
   			}
   		}
   		function nextPage(){
   			console.log(page);
   			if(page==99){
   				alert("没有下一页");
   			}else{
   				page = page +1;
   				search();
   			}
   		}
   		
   		function search() {
				val = $("#val").val();
				console.log(page);
				$.ajax({
					url : 'findBookByVal.do',
					type : 'post',
					dataType : 'json',
					data : {'val':val,'bookType':bookType,'page':page},
					success : function(data){
						$("#page").attr("value",page);
						page = parseInt($("#page").val());
						console.log(data);
						if(data.length==0){
							alert("没有符合的书本");
						}
						var htmlStr = "<table style='text-align:center;' border='3px'bordercolor=green>";
				         htmlStr += "<tr><td>"
					         +"书  本  编  号"+"</td><td>"
					         +"书  本  名  称"+"</td><td>"
					         +"书  本  分  类"+"</td><td>"
					         +"出  版  社"+"</td><td>"
					         +"书  本  定  价"+"</td><td>"
					         +"书  本  成  新"+"</td><td>"
					         +"上  架  日  期"+"</td><td>"
					         +"修  改"+"</td>"
					         +"</tr>";
					    for(var i = 0; i < data.length; i++){
					         var book = data[i];
					         htmlStr += "<tr><td>"
					         +"<div onclick=\"findBookByBookId('"+book.bookId+"')\" style='cursor:pointer'>"+book.bookId+"</div></td><td>"
					         +"<div onclick=\"findBookByBookId('"+book.bookId+"')\" style='cursor:pointer'>"+book.bookName+"</div></td><td>"
					         +"<div onclick=\"findBookByBookId('"+book.bookId+"')\" style='cursor:pointer'>"+book.bookType+"</div></td><td>"
					         +"<div onclick=\"findBookByBookId('"+book.bookId+"')\" style='cursor:pointer'>"+book.press+"</div></td><td>"
					         +"<div onclick=\"findBookByBookId('"+book.bookId+"')\" style='cursor:pointer'>"+book.price+"</div></td><td>"
					         +"<div onclick=\"findBookByBookId('"+book.bookId+"')\" style='cursor:pointer'>"+book.discount+"</div></td><td>"
					         +"<div onclick=\"findBookByBookId('"+book.bookId+"')\" style='cursor:pointer'>"+(book.addDate.year+1900)+"-"+(book.addDate.month+1)+"-"+book.addDate.date+"</div></td><td>"
					         +"<div onclick=\"findBookByBookId('"+book.bookId+"')\" style='cursor:pointer'>修 改</div></td></tr>";
					    }
					    htmlStr += "</table>";
					    $("#table").html(htmlStr);
					}
				});
				
		}
   		function findBookByBookId(bookId) {
			$.ajax({
				url : 'findBookByBookId.do',
				type : 'post',
				dataType : 'json',
				data : {'bookId':bookId},
				success : function(data){
					window.location.href="toModifyBookInfo.do";
				}
			});
		}
	</script>
</center>

</html>